<template>
    <div class="side_pop" ref="side" @swipe="swipePop">
        <list>
            <cell class="cell" v-for="item in list" @click="select(item)">
                <text class="list_cont">{{item.name}}</text>
            </cell>
        </list>
    </div>
</template>
<script>
    const animation = weex.requireModule('animation')
    export default {
        data () {
            return {
                list: [],
                selectBrand: {},
            }
        },
        created () {
            this.getBrandList() // 获取车品牌获取车品牌
        },
        mounted () {
        },
        methods: {
            // 滑动事件
            swipePop (e) {
                if (e.direction == 'left') {
                    this.hide()
                }
            },
            hide () {
                this.sideAnima(-750, 800);
            },
            sideAnima (trans, time) {
                var sideEl = this.$refs.side;
                animation.transition(sideEl, {
                    styles: {
                        transform: 'translateX(' + trans + 'px)',
                        transformOrigin: 'left center'
                    },
                    duration: time, //ms
                    timingFunction: 'ease',
                    delay: 0 //ms
                }, function () {
                })
            },
            select (item) {
                this.selectBrand = item
                this.hide()
            },
            // 调取侧栏
            showSide (list, num) {
                this.selecData = num
                this.list = list
                this.sideAnima(750, 800);
            },
            // 封装数据
            dataPack (dataList, name) {
                for (let i = 0, length = dataList.length; i < length; i++) {
                    dataList[i].name = dataList[i][name]
                }
                return dataList
            },
            // 查询汽车品牌
            getBrandList () {
                this.$fetch({
                    method: 'POST',    // 大写
                    name: 'brand.list', //当前是在apis中配置的别名，你也可以直接绝对路径请求 如：url:http://xx.xx.com/xxx/xxx
                    data: {}
                }).then(resData => {
                    // 成功回调
                    console.log(resData)
                    if(resData && resData.errno == 0){
                        this.list = this.dataPack(resData.data.brandList, 'brandName')
                    }
                }, error => {
                    // 错误回调
                    console.log(error)
                })
            },
            // 选择汽车品牌
            carBrand () {
                this.showSide(this.list, 2)
            },
        }
    }
</script>
<style>
.iconfont {
    font-family: iconfont;
}
.wrapper{
    background-color: #fff;
}
.select_back{
    background-color: #aaa;
}
.color_back{
    background-color: #eee;
}
.status-bar{
    width: 750px;
    height: 40px;
    background-color: #fff;
}
.header{
    display: flex;
    flex-direction: row;
    background-color: #fff;
    height: 88px;
    align-items: center;
    justify-content: space-between;
}
.header_right{
    flex-direction: row;
    align-items: center;
}
.headerTextSize{
    font-size: 35px;
    color: #666;
    margin-left: 5px;
    width: 270px;
}
.headerIcon{
    font-size: 40px;
    color: #666;
    margin-left: 24px;
    margin-right: 15px;
}
.content{
    background-color: #fff;
}
.cont_title{
    background-color: #1E90FF;
    text-align: center;
    color: #fff;
    font-size: 36px;
    height: 80px;
    line-height: 80px;
}
.cont_first{
    flex-direction: row;
    align-items: center;
    height: 80px;
}
.cont_fir1{
    width: 160px;
    text-align: center;
    color: #666;
}
.cont_provice{
    width: 260px;
}
.cont_car_brand {
    align-items: flex-start;
    flex-direction: row;
    padding-top: 10px;
}
.car_brand_title{
    flex-direction: row;
}
.car_brand_fir1{
    width: 160px;
    text-align: center;
    color: #666;
    height: 60px;
    line-height: 60px;
}
.car_brand_info{
    width: 460px;
    margin-bottom: 20px;
}
.border {
    border-style: solid;
    border-width: 1px;
    border-color: #666;
    border-radius: 6px;
}
.bottom{
    padding-bottom: 20px;
    border-bottom-style: solid;
    border-bottom-color: #eee;
    border-bottom-width: 1px;
}

.car_params{
    flex-direction: row;
    justify-content: center;
    align-items: center;
}
.radio_class{
    flex-direction: row;
    align-items: center;
}
.car_param_title{
    text-align: left;
    padding-left: 10px;
    color: #666;
    height: 80px;
    line-height: 80px;
    flex: 1;
}
.car_param_val{
    flex: 1;
    flex-direction: row;
}
.param_val_text{
    width: 100px;
    margin-left: 20px;
    margin-right: 20px;
    padding: 10px;
    text-align: center;
    border-radius: 10px;
    border-style: solid;
    border-width: 1px;
    border-color: #aaa;
}
.car_param_cont{
    flex: 1;
}
.select_box{
    height: 60px;
    line-height: 60px;
    text-align: center;
    color: #666;
    margin-right: 16px;
    padding-right: 16px;
    padding-left: 16px;
}
.car_color_title{
    height: 80px;
    line-height: 80px;
}
.color_value{
    flex-direction: row;
    margin-right: 10px;
    margin-left: 10px;
    margin-bottom: 15px;
    padding: 5px;
    align-items: center;
    justify-content: center;
    flex: 1;
}
.color_val_bord{
    border-style: solid;
    border-color: #999;
    border-width: 1px;
}
.row{
    flex-direction: row;
    /* height:80px; */
}
.red{
    height: 30px;
    width: 30px;
    background-color: #f00;
}
.green{
    height: 30px;
    width: 30px;
    background-color: #0f0;
}
.blue{
    height: 30px;
    width: 30px;
    background-color: #00f;
}
.yellow{
    height: 30px;
    width: 30px;
    background-color: #ff0;
}
.white{
    height: 30px;
    width: 30px;
    background-color: #fff;
}
.black{
    height: 30px;
    width: 30px;
    background-color: #000;
}
.silver_gray{
    height: 30px;
    width: 30px;
    background-color: #C0C0C0;
}
.purple{
    height: 30px;
    width: 30px;
    background-color: #8A2BE2;
}
.brown{
    height: 30px;
    width: 30px;
    background-color: #A52A2A;
}
.brownness{
    height: 30px;
    width: 30px;
    background-color: #556B2F;
}
.orange{
    height: 30px;
    width: 30px;
    background-color: #FFA500;
}
.pink{
    height: 30px;
    width: 30px;
    background-color: #FFC0CB;
}
.champagne{
    height: 30px;
    width: 30px;
    background-color: #FFFF99;
}
.light_config{
    align-items: center;
    /* width: 150px; */
}
.light_config_img{
    width: 50px;
    height: 50px;
}
.color_name{
    color: #666;
    margin-left: 15px;
}
.car_config_title{
    height: 80px;
    line-height: 80px;
}
.car_info{
    flex-direction: row;
    margin-top: 10px;
    margin-bottom: 10px;
    align-items: center;
}
.car_info_name{
    color: #666;
    width: 200px;
    text-align: center;
}
.car_info_input{
    width: 360px;
    border-style: solid;
    border-width: 1px;
    border-color: #666;
    border-radius: 5px;
    height: 70px;
    line-height: 70px;
    padding-left: 10px;
}
.car_info_date{
    width: 360px;
    color: #666;
    padding: 5px;
    text-align: center;
    border-style: solid;
    border-color: #666;
    border-width: 1px;
    border-radius: 5px;
    height: 70px;
    line-height: 60px;
}
.sell_rule{
    color: #f00;
    height: 80px;
    line-height: 80px;
}
.car_condition{
    height: 240px;
    border-style: solid;
    border-color: #666;
    color: #666;
    border-width: 1px;
    border-radius: 10px;
    margin: 10px;
    padding: 8px;
}
.button{
    align-items: center;
    margin-top: 40px;
    margin-bottom: 40px;
}
/* 左侧弹窗 */
.side_pop{
    position: absolute;
    top: 138px;
    background-color: #fff;
    width: 750px;
    height: 1334px;
    padding-top: 100px;
    left: -750px;
}
.cell{
    width: 750px;
    border-bottom-color: #eee;
    border-bottom-style: solid;
    border-bottom-width: 1px;
}
.list_cont{
    color: #333;
    font-size: 30px;
    height: 100px;
    line-height: 100px;
    margin-left: 20px;
}
</style>